<template>
  <div class="animated fadeIn">
    <!-- 商情 2018/3/21 11:13 ZuoW -->
    <Row>
      <i-col :span="4">
        <span>排序</span>
        <RadioGroup v-model="tabParam.msgType" type="button"
                    @on-change="handleSearchContainer">
          <Radio label="">默认</Radio>
          <Radio label="2">供</Radio>
          <Radio label="1">需</Radio>
        </RadioGroup>
      </i-col>
      <i-col :span="8">
        <Button type="primary" @click="addProduct">
          <Icon type="ios-download-outline"></Icon>
          发布信息
        </Button>
      </i-col>
    </Row>
    <Row>
      <i-col :span="24">
        <Tabs v-model="tabVal">
          <template v-for="item in productStatues">
            <TabPane :label="item.label" :name="item.val"></TabPane>
          </template>
        </Tabs>
      </i-col>
    </Row>
    <Row>
      <i-col span="24">
        <tablePage ref="containerTab" :api="getProductDemandByPage" :param="tabParam">
          <template slot-scope="props">
            <Table :columns="productColumn" :data="props.data"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  import {getProductDemandByPage, deleteProductDemand} from '@api/backEnd/productDemand'

  export default {
    name: 'productRequirementListAll',
    data () {
      let productColumn = [
        {
          title: '货物名称',
          ellipsis: true,
          key: 'productName'
        },
        {
          title: '发布时间',
          key: 'sendTime'
        },
        {
          title: '信息类型',
          ellipsis: true,
          render: (h, params) => {
            const type = params.row.msgType
            if (type === 1) {
              return h('div', [
                h('Tag', {
                  props: {
                    type: 'dot',
                    color: 'blue'
                  }
                }, '需求')
              ])
            } else {
              return h('div', [
                h('Tag', {
                  props: {
                    type: 'dot',
                    color: 'yellow'
                  }
                }, '供给')
              ])
            }
          }
        },
        {
          title: '数量',
          key: 'number',
          render: (h, params) => {
            let thisData = params.row.number
            if (params.row.unit) {
              thisData = params.row.number + params.row.unit
            }
            return (<span>{thisData}</span>)
          }
        },
        {
          title: '所在城市名称',
          ellipsis: true,
          key: 'localCityName'
        },
        {
          title: '所在城市详细地址',
          ellipsis: true,
          key: 'localCityDetail'
        },
        {
          title: '目的地名称',
          ellipsis: true,
          key: 'needCityName'
        },
        {
          title: '目的地详细地址',
          ellipsis: true,
          key: 'needCityDetail'
        },
        {
          title: '联系人',
          ellipsis: 'false',
          key: 'userName'
        },
        {
          title: '联系电话',
          key: 'mobile'
        },
        {
          title: '操作',
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$router.push({path: 'product_requirement_edit/' + params.row.id})
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      content: '确定删除？',
                      onOk: () => {
                        deleteProductDemand(params.row.id).then(res => {
                          if (res.data.isSuccess === 1) {
                            this.$Message.info('删除成功')
                            this.$refs['containerTab'].dataRefresh()
                          } else {
                            this.$Message.error('删除失败请重试!')
                          }
                        })
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ]
      let productStatues = [
        {label: '货物', val: '2'},
        {label: '车辆', val: '1'},
        {label: '集装箱', val: '3'}
      ]
      let tabVal = productStatues[0].val
      let tabParam = {
        productType: +tabVal,
        msgType: '',
        localCityId: '',
        needCityId: '',
        isMine: 1
      }
      let datas = {tabVal, tabParam, productColumn, productStatues, getProductDemandByPage}
      return datas
    },
    computed: {},
    methods: {
      handleSearchContainer () {
        this.$refs['containerTab'].dataRefresh()
      },
      dataRefresh () {
        this.$refs['containerTab'].dataRefresh()
      },
      addProduct () {
        this.$router.push({path: 'product_requirement_add'})
      }
    },
    created () {
    },
    mounted () {
    },
    watch: {
      tabParam: {
        handler: function (val, oldVal) {
          this.tabParam.productType = +this.tabVal
          this.$refs['containerTab'].dataRefresh()
        },
        deep: true
      },
      tabVal: {
        handler: function (val, oldVal) {
          this.tabParam.productType = +val
          this.$refs['containerTab'].dataRefresh()
        },
        deep: true
      }
    },
    components: {tablePage}
  }
</script>
<style scoped>

</style>
